<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="./js/ol.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //实例化OSM图层数据源对象
            var osmSource = new ol.source.OSM();
            //实例化地图对象
            var map = new ol.Map({
                //目标容器
                target: 'map',
                //图层
                layers: [
                    //加载OSM瓦片图层
                    new ol.layer.Tile({
                        //OSM数据源
                        source:osmSource
                    }),
                    //加载瓦片网格图层
                    new ol.layer.Tile({
                        //瓦片网格数据源
                        source: new ol.source.TileDebug({
                            //投影
                            projection: 'EPSG:3857',
                            //获取瓦片网格信息
                            tileGrid:osmSource.getTileGrid()
                        })
                    })
                ],
                //实例化视图对象
                view: new ol.View({
                    //视图中心
                    center: [12000000, 3000000],
                    //视图缩放等级
                    zoom:10
                })
            });
        };
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>